<template>
  <XenPageLayout
    title="荣誉职称详情"
    title-align="left"
    :show-back="true"
    navbar-bg-color="#059669"
    navbar-text-color="#ffffff"
    navbar-icon-color="#ffffff"
    :loading="loading"
    :error="hasError"
    @retry="loadDetail"
  >
    <view class="detail-page">
      <view v-if="!loading && !hasError" class="detail-container">
        <!-- 荣誉职称详情卡片 -->
        <view class="detail-card">
          <view class="detail-header">
            <text class="header-title">{{
              honorDetail.QualificationName || "资质名称"
            }}</text>
            <text class="header-subtitle">{{
              honorDetail.ProfessionalTitleTypeName ||
              honorDetail.TitleLevel ||
              "资质类别"
            }}</text>
          </view>

          <view class="detail-content">
            <!-- 荣誉职称信息 -->
            <view class="info-section">
              <view class="info-grid">
                <view v-if="honorDetail.QualificationName" class="info-item">
                  <text class="info-label">资质名称</text>
                  <text class="info-value title-value">{{
                    honorDetail.QualificationName
                  }}</text>
                </view>
                <view
                  v-if="honorDetail.ProfessionalTitleTypeName"
                  class="info-item"
                >
                  <text class="info-label">资质类别</text>
                  <text class="info-value">{{
                    honorDetail.ProfessionalTitleTypeName
                  }}</text>
                </view>
                <view v-if="honorDetail.TitleLevel" class="info-item">
                  <text class="info-label">职称等级</text>
                  <text class="info-value">{{ honorDetail.TitleLevel }}</text>
                </view>
                <view v-if="honorDetail.CertificateCode" class="info-item">
                  <text class="info-label">证书编码</text>
                  <text class="info-value">{{
                    honorDetail.CertificateCode
                  }}</text>
                </view>
                <view v-if="honorDetail.QualificationLevel" class="info-item">
                  <text class="info-label">资质等级</text>
                  <text class="info-value">{{
                    honorDetail.QualificationLevel
                  }}</text>
                </view>
                <view v-if="honorDetail.IssuingAuthority" class="info-item">
                  <text class="info-label">发证单位</text>
                  <text class="info-value">{{
                    honorDetail.IssuingAuthority
                  }}</text>
                </view>
                <view v-if="honorDetail.ObtainedDate" class="info-item">
                  <text class="info-label">获得日期</text>
                  <text class="info-value">{{
                    formatDateTime(honorDetail.ObtainedDate)
                  }}</text>
                </view>
                <view v-if="honorDetail.ExpiryDate" class="info-item">
                  <text class="info-label">有效期日期</text>
                  <text class="info-value">{{
                    formatDateTime(honorDetail.ExpiryDate)
                  }}</text>
                </view>
                <view v-if="honorDetail.SalaryReward" class="info-item">
                  <text class="info-label">薪酬奖励</text>
                  <text class="info-value salary-value">{{
                    honorDetail.SalaryReward
                  }}</text>
                </view>
                <view v-if="honorDetail.Remark" class="info-item">
                  <text class="info-label">备注</text>
                  <text class="info-value">{{ honorDetail.Remark }}</text>
                </view>
                <view v-if="honorDetail.TitleDocumentId" class="info-item">
                  <text class="info-label">证书文件</text>
                  <view class="info-value file-value" @tap="downloadDocument()">
                    <uni-icons type="paperplane" size="16" color="#059669" />
                    <text class="file-name">{{ getDocumentFileName() }}</text>
                    <text class="preview-hint">点击预览</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </XenPageLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import Api from "../api";
import type { ISysPersonProfessionalTitle } from "../api/interface";
import XenPageLayout from "@/layouts/XenPageLayout.vue";
import { formatDateTime } from "@/utils/xenUtils";

// 响应式数据
const loading = ref(true);
const hasError = ref(false);
const honorId = ref<string>("");

// 荣誉职称详情数据
const honorDetail = ref<ISysPersonProfessionalTitle>({
  ID: "",
  PersonId: null,
  Person: undefined,
  TitleName: null, // 保留字段但设为null，因为接口需要
  TitleLevel: "",
  CertificateCode: "",
  SalaryReward: "",
  TitleDocumentId: null,
  TitleDocument: undefined,
  // 新增字段
  ProfessionalTitleTypeId: null,
  QualificationLevel: "",
  IssuingAuthority: "",
  ObtainedDate: null,
  ExpiryDate: null,
  Remark: "",
  QualificationName: "", // 资质名称字段
  ProfessionalTitleTypeName: null, // 资质类别名称字段
});

// 加载详情数据
const loadDetail = async () => {
  if (!honorId.value) {
    uni.showToast({
      title: "缺少荣誉职称ID参数",
      icon: "none",
    });
    return;
  }

  loading.value = true;
  hasError.value = false;

  try {
    console.log("正在获取荣誉职称详情，ID:", honorId.value);

    // 调用真实的API接口
    const res = await Api().getHonorTitleDetail(honorId.value);
    console.log("荣誉职称详情接口返回:", res);

    if (res && res.Entity) {
      honorDetail.value = res.Entity;
      console.log("获取荣誉职称详情成功:", honorDetail.value);
    } else {
      hasError.value = true;
      console.log("荣誉职称详情数据异常，返回数据:", res);
      uni.showToast({
        title: "获取荣誉职称详情失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("获取荣誉职称详情异常:", error);
    hasError.value = true;
    uni.showToast({
      title: "获取荣誉职称详情失败",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 获取文档文件名
const getDocumentFileName = () => {
  if (
    honorDetail.value.TitleDocument &&
    typeof honorDetail.value.TitleDocument === "string"
  ) {
    return honorDetail.value.TitleDocument;
  }
  return "职称证书.pdf";
};

// 预览证书文件
const downloadDocument = async () => {
  if (!honorDetail.value.TitleDocumentId) {
    uni.showToast({
      title: "证书文件不存在",
      icon: "none",
    });
    return;
  }

  try {
    uni.showLoading({
      title: "加载中...",
    });

    // 使用统一的预览文件API
    await Api().previewFile(
      honorDetail.value.TitleDocumentId,
      getDocumentFileName(),
    );

    uni.showToast({
      title: "文件加载成功",
      icon: "success",
    });
  } catch (error) {
    console.error("预览证书文件失败:", error);
    uni.showToast({
      title: "文件预览失败",
      icon: "none",
    });
  } finally {
    uni.hideLoading();
  }
};

// 页面加载
onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  // @ts-ignore
  const options = currentPage.options || {};

  if (options.id) {
    honorId.value = options.id;
    loadDetail();
  } else {
    loading.value = false;
    uni.showToast({
      title: "缺少必要参数",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});
</script>

<style lang="scss" scoped>
.detail-page {
  padding: 16px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.detail-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.detail-header {
  background: linear-gradient(135deg, #059669, #10b981);
  color: white;
  padding: 20px;

  .header-title {
    font-size: 20px;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
  }

  .header-subtitle {
    font-size: 14px;
    opacity: 0.9;
  }
}

.detail-content {
  padding: 24px;
}

.info-section {
  margin-bottom: 0;
}

.info-grid {
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;

    &:last-child {
      border-bottom: none;
    }
  }
}

.info-label {
  color: #6b7280;
  font-weight: 500;
  min-width: 120px;
  flex-shrink: 0;
  font-size: 14px;
}

.info-value {
  color: #374151;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
  flex: 1;
  font-size: 14px;

  &.title-value {
    color: #059669;
    font-weight: 600;
  }

  &.salary-value {
    color: #2563eb;
    font-weight: 600;
  }
}

// 文件预览相关样式
.file-value {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: #f0f9ff;
  border-radius: 6px;
  border: 1px solid #e0f2fe;
  cursor: pointer;
  transition: all 0.3s ease;
  word-break: normal;
  text-align: left;
  flex-shrink: 0;

  &:active {
    background-color: #e0f2fe;
    transform: scale(0.98);
  }
}

.file-name {
  color: #374151;
  font-weight: 500;
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.preview-hint {
  color: #059669;
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
  flex-shrink: 0;
}
</style>
